<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单测试</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/ilovefree-migration.css">
    <link rel="stylesheet" href="assets/css/enhanced-layout.css">
    <link rel="stylesheet" href="assets/css/fontawesome-icons.css">
    <style>
        .test-container { padding: 20px; }
        .debug-log {
            background: #2d3748;
            color: #e2e8f0;
            padding: 15px;
            border-radius: 8px;
            font-family: monospace;
            font-size: 14px;
            margin: 20px 0;
            max-height: 300px;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <div class="test-container">
        <h1>简单标签测试</h1>

        <?php
        require_once 'config/config.php';
        require_once 'includes/database.php';
        $db = new Database();

        // 获取分类2的数据
        $category = null;
        $categories = $db->getCategories();
        foreach ($categories as $cat) {
            if ($cat['id'] == 2) {
                $category = $cat;
                break;
            }
        }

        $navigations = $db->getNavigations(2);
        $tags = $db->getTags(2);

        // 获取推荐标签信息
        $recommendTagId = 0;
        foreach ($tags as $tag) {
            if ($tag['name_cn'] === '推荐') {
                $recommendTagId = $tag['id'];
                break;
            }
        }
        ?>

        <div class="debug-log" id="debug-log">
            调试信息将在这里显示...
        

        <!-- 标签容器 -->
        <div class="category-header">
            <div class="category-title">
                <div class="category-icon">
                <h2 class="category-name"><?php echo htmlspecialchars($category['name']); ?></h2>
            
            <div class="tags-container" id="category-2">
                <!-- 推荐标签 -->
                <button class="tag-btn active" data-tag-id="<?php echo $recommendTagId; ?>" data-tag-filter="推荐" onclick="testFilter(<?php echo $recommendTagId; ?>, '推荐')">
                    推荐
                    <span class="tag-count">15</span>
                </button>

                <?php
                // 过滤掉推荐标签
                $filteredTags = array_filter($tags, function($tag) {
                    return trim($tag['name_cn']) !== '推荐';
                });
                ?>
                <?php foreach ($filteredTags as $tag): ?>
                    <button class="tag-btn" data-tag-id="<?php echo $tag['id']; ?>" data-tag-filter="<?php echo htmlspecialchars($tag['name_cn']); ?>" onclick="testFilter(<?php echo $tag['id']; ?>, '<?php echo htmlspecialchars($tag['name_cn']); ?>')">
                        <?php echo htmlspecialchars($tag['name_cn']); ?>
                        <span class="tag-count">5</span>
                    </button>
                <?php endforeach; ?>
            
        

        <!-- 导航卡片 -->
        <div class="nav-grid" id="nav-grid-2">
            <?php foreach ($navigations as $nav): ?>
                <?php
                // 构建标签过滤器
                $tagFilters = [];
                if (!empty($nav['tag_ids']) && is_array($nav['tag_ids'])) {
                    foreach ($nav['tag_ids'] as $tagId) {
                        foreach ($tags as $tag) {
                            if ($tag['id'] == $tagId) {
                                $tagFilters[] = htmlspecialchars($tag['name_cn']);
                                break;
                            }
                        }
                    }
                    $tagFilters[] = '推荐';
                }
                $tagFiltersString = implode(',', array_unique($tagFilters));
                ?>
                <div class="nav-card" data-tag-filters="<?php echo $tagFiltersString; ?>">
                    <a href="<?php echo htmlspecialchars($nav['url']); ?>" target="_blank">
                        
                            <h4><?php echo htmlspecialchars($nav['name']); ?></h4>
                            <p><?php echo htmlspecialchars($nav['description']); ?></p>
                        
                    </a>
                
            <?php endforeach; ?>
        
    

    <script>
        function log(message) {
            console.log(message);
            const logDiv = document.getElementById('debug-log');
            const timestamp = new Date().toLocaleTimeString();
            logDiv.innerHTML += `[${timestamp}] ${message}<br>`;
            logDiv.scrollTop = logDiv.scrollHeight;
        }

        function testFilter(tagId, tagName) {
            log(`🏷️ 测试标签过滤: tagId=${tagId}, tagName="${tagName}"`);

            // 更新按钮状态
            document.querySelectorAll('.tag-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            document.querySelector(`[data-tag-id="${tagId}"]`).classList.add('active');

            // 过滤卡片
            const cards = document.querySelectorAll('.nav-card');
            let visibleCount = 0;

            cards.forEach(card => {
                const filters = card.getAttribute('data-tag-filters') || '';
                const tags = filters.split(',').map(tag => tag.trim()).filter(tag => tag);

                log(`🔍 检查卡片: ${card.querySelector('h4').textContent}`);
                log(`   - 标签: [${tags.join(', ')}]`);
                log(`   - 应该显示: ${tags.includes(tagName)}`);

                if (tags.includes(tagName)) {
                    card.style.display = 'block';
                    visibleCount++;
                    log(`   - ✅ 显示卡片`);
                } else {
                    card.style.display = 'none';
                    log(`   - ❌ 隐藏卡片`);
                }
            });

            log(`🎯 过滤完成，显示 ${visibleCount} 个卡片`);
        }

        document.addEventListener('DOMContentLoaded', () => {
            log('🎯 页面加载完成');
            log(`📊 导航卡片总数: ${document.querySelectorAll('.nav-card').length}`);
            log(`📊 标签按钮总数: ${document.querySelectorAll('.tag-btn').length}`);

            // 测试推荐标签
            setTimeout(() => {
                log('🧪 自动测试推荐标签...');
                testFilter(<?php echo $recommendTagId; ?>, '推荐');
            }, 1000);
        });
    </script>
</body>
</html>